<script lang="ts" setup>
// import { NotificationsCircle } from "@vicons/ionicons5";
import BaseWindow from "@/components/base-window/index.vue";
import { onMounted } from "vue";
import RateChart from "@/components/echarts/rate/index.vue";
onMounted(() => {});
</script>
<template>
  <BaseWindow title="粮食存储总量">
    <div class="wrapper">
      <div class="row">
        <RateChart active-color="rgba(200,43,87)"></RateChart>
        <RateChart active-color="rgb(214,165,57)"></RateChart>
      </div>
      <div class="row">
        <RateChart active-color="rgb(89,193,150)"></RateChart>
        <RateChart active-color="rgb(121,21,245)"></RateChart>
      </div>
    </div>
  </BaseWindow>
</template>
<style lang="scss" scoped>
.wrapper {
  padding: 15px 30px;
  flex-wrap: wrap;
  width: 450px;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>
